﻿import QtQuick 2.5
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import "../components"

Item {



    Connections{
        target: mainwindow
        onAskForTab:{
            if(mainwindow.mainPage !== 7) return
            mainwindow.permitTab()
        }
    }

    Component.onCompleted: {
        var list = layout_list.children
        for(let i = 0; i < list.length; i ++){
            list[i].button_color = "transparent"
            list[i].text_color = "#666666"
            list[i].button_color_select = "white"
            list[i].text_color_select = "#1677FF"
        }
    }

    property int helpPage: 0
    anchors.fill: parent
    anchors.margins: 15*dp


    Item{                           // 上面的条
        id: layout_top
        height: 40*dp
        width: parent.width
        Text{
            text: "帮助"
            font.pixelSize: config.fontsize + 4
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    Rectangle{                      // 左侧的切换栏
        height: 60*dp * 2 + 30*dp
        width: 250*dp
        x: 0
        y: 50*dp
        color: "#EFEFF2"
        Column{
            id: layout_list
            anchors.fill: parent
            anchors.margins: 15*dp
            PushButton{
                title: "关于我们  "
                height: 60*dp
                width: parent.width + 20*dp
                button_icon: "qrc:/picture/help_about.png"
                button_icon_select: "qrc:/picture/help_about_select.png"
                isSelected: helpPage === 0
                onReleased: {
                    helpPage = 0
                }
            }PushButton{
                title: " 帮助   "
                height: 60*dp
                width: parent.width + 20*dp
                button_icon: "qrc:/picture/help_help.png"
                button_icon_select: "qrc:/picture/help_help_select.png"
                isSelected: helpPage === 1
                onReleased: {
                    helpPage = 1
                }
            }

        }

    }

    Rectangle{          // 右侧
        x: 250*dp
        y: 50*dp
        height: parent.height-50*dp
        width: parent.width-250*dp
        color: "white"
        id: layout_mainpage
        // 关于我们
        Item {
            visible: helpPage === 0
            anchors.fill: parent
            Rectangle{
                height: 220*dp
                width: 720*dp
                anchors.horizontalCenter: parent.horizontalCenter
                y: 60*dp
                color: "#F2F9FF"
                Text {
                    text: "软件名称：RT-PCR-96_Analysis_software（Multi-machine）<br/>软件版本：V1.0 <br/> 公司名称：长春市博坤生物科技有限公司 <br/> 声明：仅用于研究，不能用于生物诊断 "
                    anchors.centerIn: parent
                    horizontalAlignment: Text.AlignHCenter  // 水平居中
                    verticalAlignment: Text.AlignVCenter    // 垂直居中
                    font.pixelSize: config.fontsize
                    lineHeight: 1.5 //文本行高1.5倍

                }
            }
        }

        // 帮助页面
        Item {
            visible: helpPage === 1
            anchors.fill: parent
            clip: true
            Rectangle {
                width: 718*dp
                height: parent.height - 80
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 40
                color: "#F2F9FF"
                clip: true

                Flickable {
                    id: flickableContent
                    anchors.fill: parent

                    // 设置内容边界，确保滚动范围正确
                    contentWidth: 718*dp
                    contentHeight: textContent.height+10

                    // 设置滚动方向为垂直方向（可根据需求修改为水平或同时支持）
                    flickableDirection: Flickable.VerticalFlick

                    Text {
                        id: textContent
                        textFormat: Text.RichText
                        wrapMode: Text.WordWrap
                        width: parent.width

                        // 使用 Qt 的 QML 功能读取 HTML 内容
                        Component.onCompleted: {
                            var file = Qt.resolvedUrl("qrc:/help/help/help.html");
                            var xhr = new XMLHttpRequest();
                            xhr.open("GET", file, true);
                            xhr.onreadystatechange = function () {
                                if (xhr.readyState === XMLHttpRequest.DONE) {
                                    textContent.text = xhr.responseText; // 设置 HTML 内容
                                }
                            };
                            xhr.send();
                        }
                    }

                    ScrollBar {
                        orientation: Qt.Vertical
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
//                        policy: ScrollBar.AsNeeded
                    }
                }
            }

        }
    }

}
